<!--  -->
<template>
    <div class="page-container">
        <div class="header-panel">
            <el-form :inline="true" :model="queryParams" class="demo-form-inline">

                <el-form-item label="时间">
                    <el-date-picker v-model="queryParams.tm" type="datetimerange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"></el-date-picker>
                </el-form-item>

                <el-form-item label="fromCard">
                    <el-input v-model="queryParams.fromCard" placeholder="请输入fromCard" clearable style="width: 240px" />
                </el-form-item>

                <el-form-item label="toCard">
                    <el-input v-model="queryParams.toCard" placeholder="请输入toCard" clearable style="width: 240px" />
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table v-loading="loading" :data="dataList" size="medium" height="calc(100% - 100px)">
            <el-table-column type="index" align="center" width="80"></el-table-column>
            <el-table-column label="fromCard" align="center" prop="fromCard" />
            <el-table-column label="toCard" align="center" prop="toCard" :show-overflow-tooltip="true" />
            <el-table-column label="时间" align="center" prop="time" :show-overflow-tooltip="true" />
            <el-table-column label="报文" align="center" prop="content" :show-overflow-tooltip="true" />
            <el-table-column label="接收时间" align="center" prop="receiveTm" />
            <el-table-column label="状态" align="center" prop="status" :formatter="formatStatus" />

        </el-table>

        <el-pagination background style="text-align: center;margin-top: 10px;" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="page.pageNum" :page-sizes="[50, 100, 200, 500]"
            :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            queryParams: {
                tm: [],
                status: 1,
            },
            // 遮罩层
            loading: true,
            // 表格数据
            dataList: [],
            //分页条件
            page: {
                pageNum: 1,
                pageSize: 50,
                total: 0
            },
        }
    },
    computed: {},
    created() {
        this.getList()
    },
    mounted() { },
    methods: {
        handleQuery() {
            this.page.current = 1;
            this.getList()
        },
        //改变页数据量
        handleSizeChange(val) {
            this.page.pageSize = val
            this.getList()
        },
        //改变当前页
        handleCurrentChange(val) {
            this.page.pageNum = val
            this.getList()
        },
        getList() {
            this.loading = true;
            const tm = this.queryParams.tm
            const btm = tm && (tm.length > 0 ? tm[0] : null)
            const etm = tm && (tm.length > 1 ? tm[1] : null)
            this.$request({
                url: '/baseApi/cus_orimes/pageList',
                method: 'get',
                params: {
                    fromCard: this.queryParams.fromCard,
                    toCard: this.queryParams.toCard,
                    btm, etm, ...this.page, status: 1
                }
            }).then((res) => {
                if (res.code === 200) {
                    this.loading = false;
                    this.dataList = res.data;
                }
            })
        },
        formatStatus(row, column, cellValue, index) {
            return cellValue === 0 ? '正常' : '异常'
        }
    },
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类样式</style>